<template>
  <div>
    <el-card>
      <el-breadcrumb separator="/">
        <el-breadcrumb-item><i class="el-icon-s-tools" style="font-weight:bold"></i>  系统管理</el-breadcrumb-item>
        <el-breadcrumb-item><a href="/">角色管理</a></el-breadcrumb-item>
        <el-breadcrumb-item></el-breadcrumb-item>
      </el-breadcrumb>
    </el-card>
    <el-card style="margin-top:20px">
    <el-row>
        <el-col :span="8">
            <el-row>
                <el-col :span="6">角色名称：</el-col>
                <el-col :span="16">
                    <el-input v-model="queryRole.roleName" placeholder="请输入角色名称："></el-input>
                </el-col>
            </el-row>
        </el-col>
      <el-col :span="8">
          <el-button type="primary" @click="getrole()">查询</el-button>
          <el-button type="success" @click="addRoleWindows">新增</el-button>
      </el-col>
      <br><br><br>
    </el-row>
<!-- 查询角色表全部数据 马佳乐 2023年6月21日16点54分-->
<el-table :data="RoleData" stripe style="width: 100%">
          <el-table-column
          prop="id"
          label="角色编号"
          width="100">
          </el-table-column>
          <el-table-column
          prop="roleName"
          label="角色名称"
          width="150">
          </el-table-column>
          <el-table-column
          prop="roleRemark"
          label="角色备注"
          width="150">
          </el-table-column>
          <el-table-column
          prop="createTime"
          label="添加时间"
          width="750">
          </el-table-column>
          <el-table-column fixed="right" label="操作" width="280">
              <template slot-scope="scope">
                  <el-button @click="upRoleWindows(scope.row)" type="primary" size="small">编辑</el-button>
                  <el-button @click="updatedelete(scope.row.id)" type="primary" size="small">删除</el-button>
                  <el-button @click="SysRoleAssignmentWindows(scope.row.id,scope.row.menuIds)" type="primary" size="small">分配权限</el-button>
              </template>
          </el-table-column>
      </el-table>
      <br>
      <!-- 分页 马佳乐 2023年6月19日19点37分-->
      <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="page.pageNum"
      :page-sizes="[10, 20, 30, 40]"
      :page-size="page.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="page.totalSize">
      </el-pagination>
      <!-- 新增角色的弹窗 马佳乐 2023年6月21日19点12分 -->
  <el-dialog title="新增角色" :visible.sync="addRole" width="25%">
      <!-- 新增表单 马佳乐 2023年6月21日19点12分 -->
      <el-form :model="roleaddForm" ref="roleaddForm" label-width="20%" class="demo-ruleForm">
            <el-form-item label="角色名称" prop="roleName">
            <el-input v-model="roleaddForm.roleName"></el-input>
          </el-form-item>
          <el-form-item label="角色备注" prop="roleRemark">
            <el-input v-model="roleaddForm.roleRemark"></el-input>
          </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
          <el-button @click="addRole = false">取 消</el-button>
          <el-button type="primary" @click="saveRole()">确 定</el-button>
      </div>
  </el-dialog>
  <!-- 修改角色的弹窗 马佳乐 2023年6月19日20点37分 -->
  <el-dialog title="编辑角色信息" :visible.sync="updateRole" width="25%">
      <!-- 修改表单 马佳乐 2023年6月19日19点51分 -->
      <el-form :model="roleupdateForm" ref="roleupdateForm" label-width="20%" class="demo-ruleForm">
            <el-form-item label="角色名称" prop="roleName">
            <el-input v-model="roleupdateForm.roleName"></el-input>
          </el-form-item>
          <el-form-item label="角色备注" prop="roleRemark">
            <el-input v-model="roleupdateForm.roleRemark"></el-input>
          </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
          <el-button @click="updateRole = false">取 消</el-button>
          <el-button type="primary" @click="upRole()">确 定</el-button>
      </div>
  </el-dialog>
  <!-- 权限分配 马佳乐 2023年6月23日10点14分 -->
  <el-dialog title="权限分配" :visible.sync="assignmentMenu" width="30%">
        <el-tree
        :props="props"           
        :data="menuData"           
        node-key="id"
        ref="treeDate"            
        default-expand-all 
        :default-checked-keys="checks"
        show-checkbox>
        <span class="custom-tree-node" slot-scope="{data }">
            <span>{{ data.menuName }}</span>
        </span>
        </el-tree>
        <div slot="footer" class="dialog-footer">
        <el-button @click="assignmentMenu = false">取 消</el-button>
        <el-button type="primary" @click="SysRoleAssignment()">确 定</el-button>
        </div>
        <!-- <el-tree
            :data="data"
            show-checkbox
            node-key="id"
            :default-expanded-keys="[2, 3]"
            :default-checked-keys="[5]"
            :props="defaultProps">
        </el-tree> -->
    </el-dialog>
    </el-card>
  </div>
</template>

<script>
export default {
  data () {
      return {
          //树结构数据 
          treeDate: {},
          // 分配权限数据
          SysRoleBack: {},
          // 获取id值
          idss: '',
          // 用户表全查数据
          RoleData: [],
          // 表格加载
          loading: true,
          // 分页
          page: {
            totalSize: 0,
              pageNum: 1,
              pageSize: 10
          },
          // 用户表添加表单数据
          roleaddForm: {},
          // 点开页面时添加表单处于关闭状态
          addRole: false,
          // 用户表修改表单数据
          roleupdateForm: {
          },
          // 点开页面时修改表单处于关闭状态
          updateRole: false,
          // 模糊查询数据
          queryRole: {
            // 角色名称模糊查询
            roleName: '',
            // 角色备注模糊查询
            roleRemark: ''
          },
          // 点开页面时分配权限窗口处于关闭状态
          assignmentMenu: false,
          // 菜单表数据
          menuData: [],
          // 树结构数组
          checks: [],
          // 获取菜单id
          menuIds: [],
          // 获取菜单名岑那个
          props: {
            label: 'menuName'
          },

      }
  },
  mounted () {
    // 角色表全查数据
      this.getrole()
      // 获取菜单表全查数据
      this.getmenu()
      
  },
  methods: {
      // 角色表 全查
      getrole () {
          // 查看所有用户表信息
          this.$axios.get('/Role/SysRoleList', {
              params: {
                  // 当前页
                  pageNum: this.page.pageNum,
                  // 每页条数
                  pageSize: this.page.pageSize,
                  // 模糊查询角色名称
                  roleName: this.queryRole.roleName,
                  // 模糊查询角色备注
                  roleRemark: this.queryRole.roleRemark
              }
          }).then(res => {
              if (res.data.flag) {
                  this.RoleData = res.data.data.content
                  this.page.total = res.data.data.total
                  this.page.totalSize = res.data.data.totalSize
                  console.log('111')
                  console.log(this.RoleData)
              }
              this.loading = false
          }).catch(err => {
              this.Mymessage('error', err)
          })
      },
      // 角色表添加
      saveRole () {
          // 手动提交表单
          this.$axios.post('/Role/SysRoleAdd',this.roleaddForm).then(res => {
              if (res.data.flag) {
                  this.Mymessage('success', '恭喜您，操作成功')
                  this.addRole = false
                  this.getrole()
              } else {
                  this.Mymessage('waning', '很抱歉，操作失败')
              }
          }).catch(err => {
            //   console.log(err)
          })
      },
      // 角色表添加弹窗
      addRoleWindows () {
          this.roleaddForm = {}
          this.addRole = ''
      },
      // 角色表修改
      upRole () {
          // 手动提交表单
          this.$axios.put('/Role/SysRoleUpdate',this.roleupdateForm).then(res => {
              if (res.data.flag) {
                  this.Mymessage('success', '恭喜您，操作成功')
                  this.updateRole = false
                  this.getrole()
              } else {
                  this.Mymessage('waning', '很抱歉，操作失败')
              }
          }).catch(err => {
            //   console.log(err)
          })
      },
      // 角色表修改弹窗
      upRoleWindows (data) {
          this.roleupdateForm = JSON.parse(JSON.stringify(data))
          this.updateRole = true
      },
      // 角色表逻辑删除
      updatedelete (id) {
          this.$confirm('是否删除该用户信息', '提示', {
              confirmButtonClass: '确定',
              cancelButtonText: '取消',
              type: 'waning'
          }).then(() => {
              this.$axios.delete('/Role/SysRoleUpdateDelete', {
              params: {
                  id: id
              }
              }).then(res => {
              if (res.data.flag) {
                  this.getrole()
                  this.$message({ message: '删除成功!', type: 'success' })
              } else {
                  this.Mymessage('waning', '删除失败!')
              }
              }).catch(res => {
              this.Mymessage('error', '删除失败,请联系管理员')
              })
          }).catch(() => {
              this.Mymessage('info', '已取消删除')
          })
      },
      // 分配权限
      getmenu() {
        // 分配权限窗口获取菜单列表数据
        this.$axios.get('/Menu/SysMenuBackList', {
        }).then(res => {
            if(res.data.flag) {
                this.menuData = res.data.data
                this.menuIds=[]
            }
            this.loading = false
        }).catch(err => {
            this.Mymessage('error', err)
        })
      },
      // 角色表分配权限
      SysRoleAssignment (data) {
        // 将被选中的节点，返回
        const arr = this.$refs.treeDate.getCheckedKeys() 
        console.log(arr)
        debugger
        // 拼接字符串
        const str = arr.join(',') 
        console.log(str)
        debugger
          this.SysRoleBack = {
              id: this.idss,
              menuIds: str
            }
            console.log(this.menuIds)
        this.$axios.post('/Role/SysRoleAssignment',this.SysRoleBack
        ).then(res => {
            if (res.data.flag) {
                console.log(this.menuIds)
                this.Mymessage('success', res.data.data)
                this.assignmentMenu = false
                // 强制刷新
                this.$router.go(0) 
                // this.getmenu()
            }else {
                this.Mymessage('waning', res.data.data)
            }
        }).catch(err => {
            // console.log(err)
        })
      },
      // 角色表分配权限弹窗
      SysRoleAssignmentWindows (data,idsssss) {
        this.checks = []
        this.$nextTick(() => {
            this.$refs.treeDate.setCheckedKeys(this.checks)
        })
        this.treeDate = JSON.parse(JSON.stringify(idsssss))
        console.log(this.treeDate)
        if (idsssss != null && idsssss != "") {
            this.checks = this.treeDate.split(',')
        }
        console.log(this.checks)
        this.idss = data
        this.assignmentMenu = true
      },
      // 分页
      handleSizeChange (val) { 
      this.page.pageSize = val
      this.getrole()
      },
      // 分页
      handleCurrentChange (val) { 
      this.page.pageNum = val
      this.getrole()
      },
      // 弹窗提示
      Mymessage (type, text) { 
      this.$message({
          showClose: true,
          message: text,
          type: type
      })
      }
  }
}
</script>

<style>
.el-col.el-col-6 {
    margin-top: 10px;
    margin-right: -30px;
}
</style>